<template>
  <div class="_wz_singlePageA">
    <div style="height: 100px;">
        <Input v-model="sendOutsonA" type="textarea" placeholder="发送给子应用A的内容" />
        给子应用发消息：<Button type="primary" @click="sendMessage">发送消息</Button>
        <span>来自 子组件 A的数据:<span style="color:#ed4014;">{{sonApplyAData || '--'}}</span> </span>
    </div>
    <div style="height: calc(100% - 100px);">
      <WujieVue
          :name="name"
          :alive="alive"
          width="100%"
          height="100%"
          :url="url"
          :sync="sync"
          :fiber="fiber"
          :props="props"
      />
    </div>

  </div>
</template>
<script>


import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

import wuJieInteractive from "../util/wuJIe/wuJieInteractive";//无界业务对接

//reactive
export default defineComponent({
  name: 'singlePageA',//组件名称
  components: {},//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用

    // 接受默认数据
    const { sonApplyAData} = storeToRefs(mainStore)

    // singlePageAs
    const state = reactive({
      name:'singlePageA',//唯一性用户必须保证
      url:apiUrl.sonApplyAUrl,//'http://localhost:59998/#/singlePageAs',//需要渲染的url
      alive:false,//子应用保活模式，state不会丢失
      sync:true,// 路由同步模式
      fiber:true,// js加载方式  间断执行  加载 默认 true
      props:{
        data:'自定也给A子应用的数据',
        authorization:'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MTk1NTMwMTAsInVzZXJuYW1lIjoibnljal9sbGIifQ.eisR0neXVwZs4a5ajTAYmPwVnHw4U1-FVMLezhl4gmM'
      },


      sendOutsonA:'',//发送给子应用 A的数据
    });


    //发送消息
    const sendMessage = ()=>{
      wuJieInteractive.mainApplySend(state.sendOutsonA)
    }


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      sendMessage,//发送消息
      sonApplyAData,//来自 子组件 A的数据
    }
  }
})


</script>
<style lang="less">
._wz_singlePageA{
  width: 100%;
  height: 100%;
  position: relative;
  padding: 10px;
  background: #fff;
  overflow: auto;

}
</style>
